<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>bundle test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css">
    <style>
        body {
            background-color: #333;
        }

        .component-list {
            display: flex;
            box-sizing: border-box;
            position: relative;
            width: 100%;
            margin: 0;
            background: #fff;
        }

        .component-list * {
            font-size: 13px;
            box-sizing: border-box;
        }

        .component-list button {
            margin: 0 !important;
        }

        .component-list .file-list-info {
            float: left;
            white-space: nowrap;
            padding: 10px;
        }

        .component-list .file-list-info span {
            display: block;
            width: 100%;
            margin: 12px 0;
        }

        .component-list .file-list-info .total-size {
            color: #333;
        }

        .component-list .file-list {
            padding: 10px;
        }

        .component-list .file-list ul {
            margin: 0;
            padding: 0;
            height: auto;
            width: 100%;
            background-color: #f5f5f5;
        }

        .component-list .file-list ul li {
            position: relative;
            display: inline-block;
            margin: 3px;
            width: 60px;
            height: 60px;
            border: 3px solid #999;
        }

        .component-list .file-list ul li.checked {
            border: 3px solid #dc3545;
        }

        .component-list .file-list ul li img {
            width: 54px;
            height: 54px;
        }

        .component-list .file-list ul li .image-size {
            color: #666;
            font-size: 10px;
        }

        .component-list .file-list ul li .image-check {
            position: absolute;
            height: 12px;
            width: 12px;;
            top: 0;
            left: auto;
            right: 0;
            margin: 0;
            padding: 1px 0 1px 2px;
            border: 0;
            border-radius: 0 0 0 5px;
            outline: none;
            background-color: #dc3545;
        }

        .component-list .file-list ul li.checked .image-check {
            display: block;
        }

        .component-list .file-list ul li:not(.checked) .image-check {
            display: none;
        }

        .component-list .file-list ul li .image-check svg {
            display: inline-block;
            font-size: 10px;
            height: 1em;
            width: 1em;
            overflow: visible;
            vertical-align: 0.875em;
            margin: 0;
            padding: 0;
        }
        .sun-editor .__se__format__free_NORMAL, .sun-editor-editable .__se__format__free_NORMAL {
            background-color: aquamarine;
        }
        .sun-editor .__se__format__replace_CODE, .sun-editor-editable .__se__format__replace_CODE {
            border: 1px solid #333;
        }
        html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input, textarea, button {
            -webkit-tap-highlight-color: transparent;
        }
    </style>
</head>
<body>

    <!-- <div class="sun-editor" id="test_tool2" style="position: relative; left: 200px; border: 0; width: auto; height: 0px;"></div> -->

    <div>
        <textarea id="sample1" cols="80" rows="10">
            <div><span style="color: rgb(0, 130, 153);"><strong>SunEditor</strong></span><strong>.<span style="color: rgb(61, 0, 153);">create</span></strong>(<span style="color: rgb(152, 0, 0);">'exampleOptions'</span>, {</div>
            <p><br></p>
            <h3>The Suneditor is based on pure JavaScript, with no dependencies.</h3>
            <pre><div>Suneditor is a lightweight, flexible, customizable WYSIWYG text editor for your web applications.</div></pre>
            <blockquote><p>Supports Chrome, Safari, Opera, Firefox, Edge, IE11, Mobile web browser.</p></blockquote>
            <table style="width: auto;">
                <thead>
                    <tr>
                        <th>
                            <div>Column_
                            </div>
                        </th>
                        <th>
                            <div>Column_
                            </div>
                        </th>
                        <th>
                            <div>Column_
                            </div>
                        </th>
                        <th>
                            <div>Column_
                            </div>
                        </th>
                        <th>
                            <div>Column_
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><br></td>
                        <td><br></td>
                        <td><br></td>
                        <td><br></td>
                        <td><br></td>
                    </tr>
                    <tr>
                        <td><br></td>
                        <td><br></td>
                        <td><br></td>
                        <td><br></td>
                        <td><br></td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>22</td>
                        <td>333</td>
                        <td> </td>
                        <td>  </td>
                    </tr>
                    <tr>
                        <td><span style="color:brown;">111</span>22<span style="color:forestgreen;">333</span></td>
                        <td><a href="#">anchor</a></td>
                        <td><b><br></b></td>
                        <td><b> </b></td>
                        <td><br></td>
                    </tr>
                    <tr>
                        <td><br></td>
                        <td><br></td>
                        <td><br></td>
                        <td><br></td>
                        <td><br></td>
                    </tr>
                </tbody>
            </table>
        </textarea>
    </div>
    <div style="position: relative; left: 200px; border: 0; width: auto; height: 0px;">
        <div style="position: relative; left: 200px; border: 0; width: auto; height: 0px;">
            <div class="sun-editor" id="test_tool2" style="position: relative; left: 200px; border: 0; width: auto; height: 0px;"></div>
        </div>
    </div>

    <div class="sun-editor" id="test_tool" style="margin-top: 20px;"></div>

    <div class="component-list">
        <div class="file-list-info">
            <span>Audio list</span>
        </div>
        <div class="component-file-list">
            <ul id="audio_list">
            </ul>
        </div>
    </div>
    <div style="height: 300px; width: 600px; border: 1px red solid;"></div>
    <div style="height: calc(100vh - 300px); overflow: auto;">
      <div style="height: 100px; width: 600px; border: 1px red solid;"></div>
      <div id="appi">
        <textarea id="scrolleditor"></textarea>
        <div id="app">
        
        </div>
      </div>
      <div style="height: 900px; width: 600px; border: 1px red solid;"></div>
    </div>

    

    <div style="position: relative; top: 50px;">
        <textarea id="cmtest">afda</textarea>
        <button type="button" onclick="aaa()">cm</button>
        <script>
            function aaa () {
                console.log('cm', cm)
                var ed = cm.fromTextArea(document.getElementById('cmtest'), {
                    mode: 'htmlmixed',
                    htmlMode: true,
                    lineNumbers: true,
                });

                console.log(ed)
            }
        </script>
    </div>
    <div style="position: relative;">
            <div style="margin: 60px auto 0 auto; height: 1200px; position: relative;">
                <textarea id="editor" style="width: 1080px; height: 200px;">
                    <p>aaa111</p>
                    <p>1112222</p>
                    <ol>
                        <li>11111</li>
                        <li>22222</li>
                        <li>33333
                            <ol>
                                <li>aaaaa</li>
                                <li>bbbb
                                    <ol>
                                        <li>AAAAA</li>
                                        <li>BBBBB
                                            <ol>
                                                <li>dasddsaddadas</li>
                                                <li>dad
                                                    <ol>
                                                        <li>asdasdsadsadas</li>
                                                        <li>ppppppppppppppppppppppppp</li>
                                                        <li>000000aada</li>
                                                        <li>11111</li>
                                                    </ol>
                                                </li>
                                            </ol>
                                        </li>
                                        <li>2222222CCCC</li>
                                    </ol>
                                </li>
                                <li>33333cccccc</li>
                                <li>4444444ddddd</li>
                            </ol>
                        </li>
                    </ol>
                    <p>wroo</p>
                    <p>wroo</p>
                    <p>wroo</p>
                    <p>wroo</p>
                    <p>wroo</p>
                    <p>wroo</p>
                    <p>wroo</p>
                    <p>aaaaaaa</p>
                </textarea>
                <button type="button" class="btn btn-md btn-success" onclick="sun_destroy1()">Destroy</button>
                <button type="button" class="btn btn-md btn-success" onclick="sun_create1()">Create</button>
                <br>
        
                <div class="sun-editor" id="rb"></div>
                <textarea id="editor1" style="width: 100%; height: 200px;">
                    <div class="se-component se-image-container __se__float-right" contenteditable="false"><figure style="margin: auto;"><img src="http://suneditor.com/docs/cat.jpg" data-align="right" alt="Sunset image" data-rotate="" data-proportion="false" data-rotatex="" data-rotatey="" origin-size="640,426" data-origin="640,426" style="transform: rotate(0deg);" data-index="0" data-file-name="cat.jpg" data-file-size="0" data-size="," data-percentage="auto,auto"><figcaption contenteditable="true" style="margin-top: 0px;"><p>Insert description</p></figcaption></figure></div>
                    <p>Here is an example of math -&gt; <span class="katex" contenteditable="false" data-exp="\displaystyle\sum_{i=1}^{k+1}i" data-font-size="1.5em" style="font-size: 1.5em;"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mstyle scriptlevel="0" displaystyle="true"><munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mrow><mi>k</mi><mo>+</mo><mn>1</mn></mrow></munderover><mi>i</mi></mstyle></mrow><annotation encoding="application/x-tex">\displaystyle\sum_{i=1}^{k+1}i</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:3.1137820000000005em;vertical-align:-1.277669em;"></span><span class="mop op-limits"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.8361130000000003em;"><span style="top:-1.872331em;margin-left:0em;"><span class="pstrut" style="height:3.05em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathdefault mtight">i</span><span class="mrel mtight">=</span><span class="mord mtight">1</span></span></span></span><span style="top:-3.050005em;"><span class="pstrut" style="height:3.05em;"></span><span><span class="mop op-symbol large-op">∑</span></span></span><span style="top:-4.300005em;margin-left:0em;"><span class="pstrut" style="height:3.05em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathdefault mtight" style="margin-right:0.03148em;">k</span><span class="mbin mtight">+</span><span class="mord mtight">1</span></span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:1.277669em;"><span></span></span></span></span></span><span class="mspace" style="margin-right:0.16666666666666666em;"></span><span class="mord mathdefault">i</span></span></span></span> 123</p>
                    <p>​<span class="__se__katex katex" data-exp="\sum$lt;f\\0dsf" data-font-size="1em" style="font-size: 1em;" contenteditable="false"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mo>∑</mo><mo>&gt;</mo><mi>f</mi><mi>d</mi><mi>s</mi><mi>f</mi></mrow><annotation encoding="application/x-tex">\sum&gt;fdsf</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.00001em;vertical-align:-0.25001em;"></span><span class="mop op-symbol small-op" style="position:relative;top:-0.0000050000000000050004em;">∑</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span><span class="mrel">&gt;</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span></span><span class="base"><span class="strut" style="height:0.8888799999999999em;vertical-align:-0.19444em;"></span><span class="mord mathdefault" style="margin-right:0.10764em;">f</span><span class="mord mathdefault">d</span><span class="mord mathdefault">s</span><span class="mord mathdefault" style="margin-right:0.10764em;">f</span></span></span></span>df<br></p>
                    <h3>The Suneditor is based on pure JavaScript, with no dependencies.</h3>
                    <pre>Suneditor is a lightweight, flexible, customizable WYSIWYG text editor for your web applications.</pre>
                    <blockquote><p>Supports Chrome, Safari, Opera, Firefox, Edge, IE11, Mobile web browser.</p></blockquote>
                    <p><strong><span style="color: rgb(255, 94, 0);">SunEditor</span></strong>&nbsp;<em><span style="background-color: rgb(250, 237, 125);">distributed under</span></em>&nbsp;the <a href="https://github.com/JiHong88/SunEditor/blob/master/LICENSE.txt" target="_blank">MIT</a> license.</p>
                    <p><hr class="dashed"></p>
                    <p><span style="font-size: 16px;"><span style="font-family: Impact;">Table</span></span></p>
                    <table style="width: auto;"><thead><tr><th><div>Column_1</div></th><th><div>Column_2</div></th><th><div>Column_3</div></th><th><div>Column_4</div></th><th><div>Column_5</div></th></tr></thead><tbody><tr><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td></tr><tr><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td></tr><tr><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td></tr><tr><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td></tr><tr><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td></tr></tbody></table>
                    <p><br></p>
                    <ul>
                        <li>Pasting from Microsoft Word and Excel.</li>
                        <li>Custom table selection, merge and split.</li>
                        <li>Media embed, images upload.</li>
                        <li>Can use CodeMirror, KaTeX.
                            <ul>
                                <li>And.. many other features :)</li>
                            </ul>
                        </li>
                    </ul>
                    <p><br></p>
                </textarea>
                <button type="button" class="btn btn-md btn-primary" onclick="sun_noticeOpen()">noticeOpen</button>
                <button type="button" class="btn btn-md btn-primary" onclick="sun_noticeClose()">noticeClose</button>
                <button type="button" class="btn btn-md btn-primary" onclick="sun_save()">Submit</button>
                <button type="button" class="btn btn-md btn-success" onclick="sun_getContext()">getContext</button>
                <button type="button" class="btn btn-md btn-success" onclick="sun_getContents()">getContents</button>
                <button type="button" class="btn btn-md btn-success" onclick="sun_getImagesInfo()">getImagesInfo</button>
                <button type="button" class="btn btn-md btn-success" onclick="sun_insertHTML('<img src=\'http://suneditor.com/sample/img/sunset.jpg\' style=\'width:115px; height:64px;\'>')">insertHTML</button>
                <button type="button" class="btn btn-md btn-success" onclick="sun_setContents('set contents')">setContents</button>
                <button type="button" class="btn btn-md btn-success" onclick="sun_appendContents('append contents')">AppendContents</button>
                <button type="button" class="btn btn-md btn-success" onclick="sun_disable()">Disable</button>
                <button type="button" class="btn btn-md btn-success" onclick="sun_enable()">Enable</button>
                <button type="button" class="btn btn-md btn-success" onclick="sun_hide()">Hide</button>
                <button type="button" class="btn btn-md btn-success" onclick="sun_show()">Show</button>
                <button type="button" class="btn btn-md btn-success" onclick="sun_destroy()">Destroy</button>
                <button type="button" class="btn btn-md btn-success" onclick="sun_create()">Create</button>
                <br><br>

                afdsafdsja dasi fjdsaio j47vn w8994y r8943pvby49p y9p
        
                <!-- images-->
                <div id="editor2" style="width: 1080px; height: 200px;"></div>
                <div id="image_wrapper" class="component-list" style="display: none;">
                    <div class="file-list-info">
                        <span>Attached files</span>
                        <span id="image_size" class="total-size text-small-2">0KB</span>
                        <button class="btn btn-md btn-danger" id="image_remove" disabled onclick="deleteCheckedImages()">Remove</button>
                    </div>
                    <div class="file-list">
                        <ul id="image_list">
                        </ul>
                    </div>
                </div>
                <div class="component-list">
                    <div class="file-list-info">
                        <span>Video list</span>
                    </div>
                    <div class="component-file-list">
                        <ul id="video_list">
                        </ul>
                    </div>
                </div>
                
                <input type="file" id="sun_files" accept="image/*" multiple="multiple" />
                <button type="button" class="btn btn-md btn-primary" onclick="sun_setOptions2()">setoptions_balloon</button>
                <button type="button" class="btn btn-md btn-primary" onclick="sun_setOptions3()">setoptions_classic</button>
                <button type="button" class="btn btn-md btn-primary" onclick="sun_setOptions4()">setoptions_inline</button>
                <button type="button" class="btn btn-md btn-primary" onclick="sun_insertImage2()">insertImage</button>
                <button type="button" class="btn btn-md btn-success" onclick="sun_destroy2()">Destroy</button>
                <button type="button" class="btn btn-md btn-success" onclick="sun_create2()">Create</button>
                <br>
        
                <textarea name="editor3" style="width: 1080px; height: 200px;">
                    <p><br></p>
                    <h3>The Suneditor is based on pure JavaScript, with no dependencies.</h3>
                    <p>Suneditor is a lightweight, flexible, customizable WYSIWYG text editor for your web applications.</p>
                    <pre><p>Supports Chrome, Safari, Opera, Firefox, Edge, IE11, Mobile web browser.</p></pre>
                    <p>Suneditor distributed under the <a href="https://github.com/JiHong88/SunEditor/blob/master/LICENSE.txt" target="_blank">MIT</a> license.</p>
                    <p><br></p>
                </textarea>
                <button type="button" class="btn btn-md btn-success" onclick="sun_destroy3()">Destroy</button>
                <button type="button" class="btn btn-md btn-success" onclick="sun_create3()">Create</button>
                <!-- <br><br><br> -->
                <button type="button" class="btn btn-md btn-success" onclick="sun_create4()">Create in window</button>
                <!-- <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> -->
            </div>
    </div>
</body>
</html>